Project Specification

Your project is to create a web page that shows off all the skills you've learned so far! You can make your web page on any topic you'd like. There are also some specific requirements the page has to meet, but we'll talk about these in a minute.

Feel free to be creative! Here are some ideas for your web page:

• Expand your notes page from Stage 0 - this time with style!
• Create an "About Me" page that you can share with others
• Make a list of your favorite baseball players with their stat lines
• Compile a playlist by linking to songs on Spotify or YouTube

Below is an example submission using my notes as the topic:

Important note

This example is here to help give you an idea of the sort of thing you can submit for your project. For your submission, it's essential that you submit your own original work. Do not copy code or content from here into your project; create your own! If you're not sure why this matters, please see Udacity's Honor Code.

Help!

When you have questions or need help with the project, you can:

• Reach out to your personal mentor
• Chat about the project with other students on Slack
• Search the Discussion Forums, where there've already been many posts about the project
• If you haven't watched it already, you may find this work session with Andy and Liz to be helpful!

Requirements

In order to demonstrate your new skills, your project needs to meet some specific requirements. We've provided a detailed checklist below.

If you feel confident and want a shorter description of the requirements, you can also check out the project rubric, which is exactly what your reviewer will be looking at when they grade your project.

Before submitting your project, check to make sure your project meets each of these requirements:

1. Your submission has an HTML file and a CSS file

For this project, you'll need to have at least two files:

• An HTML file. This contains the HTML code that gives the structure and content of your page.
• A CSS file. This contains the CSS code that styles your page.

You can create these files yourself in your text editor, or you can download our starter files for the project. To get the starter files:

• Download the IPND Materials zip file.
• Unzip the file by double-clicking it
• Inside, open the folder called 2-Make-a-Stylish-Website and then open 3_project_starter_kit
• In this folder, you'll find two starter files: index.html and style.css

Your files should look something like this, with one ending in .html and the other in .css:

If you like, you can go beyond these requirements and create a larger project (with multiple HTML files). Just keep in mind that the reviewer may not look through all of your files and may be confused about where you're demonstrating each of the requirements listed here. So if you're submitting extra files, please include a note to the reviewer saying what they should be looking at. You can provide this information in the Notes to reviewer box when you submit your project.

Don’t see the .html and .css?

If you are using Windows and you don’t see the .html and .css extensions at the end of the file names, you might need to turn on file extensions. There are lots of pages out there showing how to do this for each version of Windows. Here’s one that has instructions for Windows 7, 8, and 10. Or you can simply do a Google search for the info, such as “how to turn on file extensions in Windows 10”.

2. All of your styling is done using a separate (linked) CSS file

Remember that you can do CSS styling in two ways:

• You can put the CSS code inside your HTML file, using the <style> tag or the style attribute. For this project, do not do it this way.
• You can put all of your CSS code in a separate file (usually this file is simply named style.css). This makes it a lot easier to edit and maintain your styles, and this is what we want you to demonstrate for this project.

Remember, you’ll need to link your HTML file to your CSS file using the <link> element (if you downloaded the starter files, your HTML code will already have the <link> element in it).

3. You've checked your code to make sure it has valid syntax

We want you to demonstrate that you know how to identify and fix syntax errors. One of the quickest ways to check your code for syntax errors is to run it through an automated validation check.

Before submitting your project, go to these validators and check your HTML and CSS files for validation errors:

• HTML Validator
• CSS Validator

If you get validation errors, don’t panic! Read the errors and try to figure out what they mean and how to fix them. It’s often helpful to copy and paste the error messages into Google.

If you get stuck, you can reach out to your mentor, post about the error on Slack, or search the discussion forums to see if previous students have dealt with similar errors.

4. Your page demonstrates how to use HTML to structure text

HTML gives structure to your page. You can make your page about anything you like, but we want you to demonstrate that you know how to structure your content. The first part of that is to make sure you have at least three sections of structured text.

Each section should have:

• A title that is formatted with a heading element (<h1>, <h2>, etc.)
• At least one paragraph of text, enclosed within a paragraph element (<p>)

Notice how this page (that you're reading now) has structured text like this—it has a series of sections, each one of which has a title and some paragraphs.

5. Your page demonstrates how to use container elements

When you have structured text, like a title followed by a paragraph, you can think of those parts as conceptually related. That is, the title and the paragraph are probably about the same concept. And you might also have an image that shows a picture of something related to that concept.

For example, if you look at the first item on this list (1. Your submission has an HTML file and a CSS file), you can see that it has a title, paragraphs, and image, that are all related to the same concept.

When you have structure like this in your page, it's a good idea to put each set of conceptually related elements inside of a container element, like a <div>. That way, you can apply a style to the <div> (like centering the content on the page), and it will affect all of the related elements inside.

So for this project, we want you to demonstrate how to wrap up conceptually related elements inside a <div>, and then apply a style to that <div> using a CSS class.

To be specific:

• Your HTML file needs to contain at least 3 <div> container elements.
• Each <div> element should contain multiple conceptually related pieces of content (like a title, paragraph, and image that are all about the same thing).
• Each <div> element should have a class applied to it.

6. Your page demonstrates how to use CSS selectors

In order to apply a style to anything in your HTML file, you'll need to use CSS selectors in your CSS file. For this project, your CSS file needs to have at least three selectors.

Here’s a reminder of what a CSS selector looks like:

p {
}

This selector will apply styles to all of the <p> elements in your HTML file.

7. Your page demonstrates use of the class attribute and class selectors

If you want to apply a style to all of a particular kind of elements on your page, you can use an element selector, like the one we just showed above (which applies a style to all <p> elements).

But if you only want to apply a style to certain elements (such as making only some of your <p> elements a particular color), then you can use a class selector. Remember, that looks something like this:

.myclassname {
}

Where myclassname can be anything you like (though try to choose a name that describes what the class is for).

To get the styling to be applied to an element, you would then use the class attribute on that element. For example:

<div class = "myclassname">

And now this particular <div> element will be styled using whatever rules you put in the myclassname class selector.

One of the most powerful things about using class selectors, is that you can create a single class selector and then apply it to multiple elements. For example, you could style multiple <div> elements using the same myclassname class that we created above.

To show that you know how to do these things, make sure that:

• At least one of the selectors in your CSS file is a class selector.
• Multiple HTML elements are styled using the same class selector.

8. Your page demonstrates the use of images

Make sure that:

• Your page uses the <img> tag to display at least one image.
• The <img> element includes alternative text (using the alt attribute) that describes the image.

Remember that you can either link to an image that's on your computer, or you can link to an online image (using that image's URL). If you're linking to an image on your own computer, you'll need to make sure that the image gets included with your submission (otherwise, we won't see it when we review your project!).

We suggest that you place any images you're using inside a folder called images, and then place this in the same folder as your HTML and CSS files, like this:

9. Your page demonstrates the use of hyperlinks

Make sure that your page uses the <a> element to provide at least one hyperlink to another page.

10. Your page gives credit

If any content (such as text or images) is not completely original, it's important to make sure that your page gives credit to the author.

For example, you may wish to include a poem or piece of artwork that was created by someone else; if you do, make sure to state who the original author is (or if the author is unknown, state where the work was taken from). If the work is taken from another website, provide a hyperlink to that website.

Please note that your code itself (that is, your HTML and CSS) must be completely original.